<template>
	<div class="app-container">
		<div class="filter-container">
			<el-input v-model="listQuery.title" placeholder="商品货号或者名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
			<!-- <el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
		    <el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
		  </el-select> -->

			<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="goGoodDetail">添加商品</el-button>
		</div>

		<el-table
			v-loading="listLoading"
			:data="list"
			element-loading-text="Loading"
			border
			fit
			stripe
			highlight-current-row
			:row-style="{ height: '40px' }"
			:cell-style="{ padding: '5px 0' }"
		>
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="操作" fixed="right" width="100">
				<template slot-scope="scope">
					<el-button @click="handleEdit(scope.row, scope.$index)" type="text" size="small">查看</el-button>
					<el-button @click="deleteGood(scope.row, scope.$index)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
			<el-table-column label="商品id" width="70" fixed="left">
				<template slot-scope="scope">
					{{ scope.row.id }}
				</template>
			</el-table-column>
			<el-table-column label="商品名称" width="150" fixed="left">
				<template slot-scope="scope">
					{{ scope.row.goodName }}
				</template>
			</el-table-column>

			<el-table-column align="center" label="商品主图" width="95">
				<template slot-scope="scope">
					<el-image style="width: 40px; height: 40px" :src="scope.row.mainImage" :preview-src-list="[scope.row.mainImage]"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="商品编号" width="150">
				<template slot-scope="scope">
					{{ scope.row.goodNo }}
				</template>
			</el-table-column>
			<el-table-column label="库存" width="110" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.goodStock }}</span>
				</template>
			</el-table-column>
			<el-table-column label="销量" width="110" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.saleNum }}</span>
				</template>
			</el-table-column>
			<el-table-column label="排序" width="110" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.sort }}</span>
				</template>
			</el-table-column>
			<el-table-column label="售价" width="110" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.goodPrice }}</span>
				</template>
			</el-table-column>
			<el-table-column label="平均成本价" width="110" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.cost }}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column class-name="status-col" label="商品状态" width="150" align="center" type="index">
        <template slot-scope="scope">
		<el-switch 
		:value="scope.row.isSale?true:false" 
		active-text="上架" 
		inactive-text="下架"
		 active-color="#0992E7"
		 @change="changeSwitch(scope.row,scope.$index)"></el-switch>
        </template>
      </el-table-column> -->
		</el-table>

		<pagination v-show="total > 5" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange" />
	</div>
</template>

<script>
import { getAll, deleteGood } from '@/api/good';
import Pagination from '@/components/Pagination'; // 分页组件

export default {
	components: { Pagination },
	filters: {
		saleFilter(status) {
			const statusMap = {
				1: 'success',
				0: 'danger'
			};
			return statusMap[status];
		},
		goodSaleFilter(status) {
			const statusMap = {
				1: '启用',
				0: '未启用'
			};
			return statusMap[status];
		}
	},
	data() {
		return {
			listQuery: {
				title: ''
			},
			list: [],
			listLoading: false,
			//页码
			pageNum: 1,
			//页数量
			pageSize: 10,
			//总数
			total: 0
		};
	},
	created() {
		this.getAll();
	},
	methods: {
		deleteGood(row, index) {
			let that = this;
			let id = this.list[index].id
			
			this.$confirm('此操作将永久删除该数据, 是否继续?', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'error'
				// type: 'warning'
			}).then(() => {
					that.$store.dispatch('good/deleteGood', id).then(res => {
							 console.log(res)
							 that.getAll()
					  });
				}).catch(() => {
					console.log('取消操作');
				});

		},
		handleFilter() {},
		//编辑
		handleEdit(row, index) {
			this.$router.push({ path: '/good/goodDetail?id=' + this.list[index].id });
		},
		changeSwitch(row, index) {
			this.list[index].isSale = this.list[index].isSale == 0 ? 1 : 0;
			const data = {
				id: row.id,
				isSale: row.isSale
			};
			// TODO更新
		},
		goGoodDetail() {
			this.$router.push('/good/goodDetail');
		},
		getAll() {
			this.listLoading = true;
			var param = {
				pageNum: this.pageNum,
				pageSize: this.pageSize
			};
			this.$store.dispatch('good/getAll', param).then(res => {
				console.log(res);
				this.list = res.data.list;
				this.total = res.data.total;
				this.listLoading = false;
			});
		},
		// 分页大小切换
		handleSizeChange(val) {
			console.log(val);
			this.pageNum = val;
			this.getAll();
		},
		// 页码切换
		handleCurrentChange(val) {
			console.log(val);
			this.pageNum = val;
			this.getAll();
		}
	}
};
</script>
<style>
.filter-container {
	margin-top: 20px;
}
.el-table {
	margin-top: 20px;
}
.mainImage {
	width: 50px;
	height: 50px;
}
</style>
